<template>
	<view>
		<view class="hbg" style="background-image: url('http://192.168.40.38/assets/img/ubg.jpg');">
			<view class="head">
				<view class="pic">
					<u--image width="130rpx" height="130rpx" src="https://cdn.uviewui.com/uview/album/1.jpg"
						shape="circle"></u--image>
				</view>
				<button class="nickname" @tap="login" v-show="showlogin1">{{ username }}</button>
				<button class="nickname" v-show="showlogin2">{{ username }}</button>
				<!-- <view class="role" @click="selecttype">
					<u--text color="#fff" size="26rpx" suffixIcon="reload"
						iconStyle="font-size: 16px;color:#fff;margin-left:8rpx" text="汽车充电"></u--text>
				</view> -->
				<view class="clear"></view>
			</view>
			<view class="mid">
				<!-- <navigator @click="gotocdz"><text>{{memberinfo.cdstatus}}</text>洗衣中</navigator> -->
				<navigator @click='gotojf'><text>0</text>正在清洗</navigator>
				<navigator url="/pages/order/order"><text>0</text>我的订单</navigator>
				<navigator @click='gotoquan'><text>0</text>优惠券</navigator>
				<!-- <navigator @click="gowallet"><text>{{money}}</text>余额</navigator> -->
				<!-- <navigator @click='gotoquan'><text>0</text>优惠券</navigator> -->
			</view>
		</view>
		<view class="content">
			<view class="title">常用功能</view>
			<view class="info">
				<u-cell-group :border="false">
					<u-cell @click="myorder" size="large" icon="order" :border="false" title="我的订单"
						:isLink="true"></u-cell>
					<u-cell url="" size="large" icon="coupon" :border="false" title="我的优惠券" :isLink="true"></u-cell>
					<!-- <u-cell @click="gotosc" size="large" icon="star" :border="false" title="收藏电站"
						:isLink="true"></u-cell> -->
					<u-cell @click="wxkefu" size="large" icon="kefu-ermai" :border="false" title="客服中心"
						:isLink="true"></u-cell>
					<u-cell url="" size="large" icon="lock" :border="false" title="隐私协议" :isLink="true"></u-cell>
					<u-cell @click="logout" size="large" icon="backspace" :border="false" title="退出登录"
						:isLink="true"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<!-- 登陆组件 -->
		<com-login ref="login" @myevent="uinfo"></com-login>
		<com-tabbar :currentTab="currentTab"></com-tabbar>
	</view>
</template>

<script>
let that
import {
	mapState,
	mapActions
} from 'vuex'

export default {
	data() {
		return {
			currentTab: 'user',
			username: '立即登录',
			showlogin1: true,
			showlogin2: false,
			money: '0.00',
			memberinfo: [],//用户信息
		}
	},
	onShow() {
		// #ifndef MP-WEIXIN
		uni.hideTabBar()
		// #endif
		// this.getmemberinfo()
		let userInfo = this.userInfo
		if (userInfo.id != '' && userInfo.id != undefined) {
			this.username = userInfo.username
			this.showlogin1 = false
			this.showlogin2 = true
			this.money = userInfo.money
		} else {
			this.showlogin1 = true
			this.showlogin2 = false
			this.money = '0.00'
			this.username = '立即登录'
		}
	},
	mounted() {
		that = this
	},
	computed: {
		//引入store全局变量
		...mapState(['loginState', 'userInfo'])
	},
	methods: {
		...mapActions(['userLoginAction', 'userLogoutAction']),
		login() {
			this.$refs.login.openLogin()
		},
		//获取当前用户信息
		getmemberinfo() {
			this.$http_api.memberinfo({
				uid: this.userInfo.id
			}).then((res) => {
				that.memberinfo = res
			})
		},
		gowallet() {
			uni.switchTab({
				url: '/pages/wallet/wallet'
			})
		},
		//跳转订单详情
		gotocdz() {
			//判断登陆状态
			if (!this.loginState) {
				this.$refs.login.openLogin()
				return
			}
			uni.navigateTo({
				url: '/pages/order/order-detail'
			})
		},
		//跳转收藏列表
		gotosc() {
			//判断登陆状态
			if (!this.loginState) {
				this.$refs.login.openLogin()
				return
			}
			uni.navigateTo({
				url: '/pages/order/order-collect'
			})
		},
		//跳转订单列表
		myorder() {
			//判断登陆状态
			//if (!this.loginState) {
			//	this.$refs.login.openLogin()
			//	return
			//}
			uni.navigateTo({
				url: '/pages/order/order'
			})
		},
		gotojf() {
			this.$u.toast('暂未开放')
			return
		},
		gotoquan() {
			this.$u.toast('暂未开放')
			return
		},
		selecttype() {
			this.$u.toast('暂未开放')
			return
		},
		//在线微信客服
		wxkefu() {
			// #ifdef  MP-WEIXIN  
			wx.openCustomerServiceChat({
				extInfo: {
					url: 'https://work.weixin.qq.com/...' //客服地址链接
				},
				corpId: '企业ID', //必须和你小程序上的一致
				success(res) {
					console.log(res, 1)
				},
				fail(res) {
					console.log(res, 2)
				},
			})
			// #endif
		},
		//退出登陆
		logout() {
			uni.showModal({
				title: '退出登录',
				content: '请确认是否要退出登录',
				success: function (res) {
					if (res.confirm) {
						that.userLogoutAction()
						that.$u.toast('退出成功')
						setTimeout(function () {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 2000)
					}
				}
			})

		},
		//子组件给父组件传值
		uinfo(e) {
			this.getmemberinfo()
			this.username = e.username
			this.money = e.money
			if (e.id != '') {
				this.showlogin1 = false
				this.showlogin2 = true
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	padding: 0 3%;
	box-sizing: border-box;
	background: #F5F5F5;
	padding-top: 60rpx;

	.title {
		font-size: 35rpx;
		font-weight: bold;
		padding-left: 15rpx;
		border-left: 2px solid #23BF61;
		line-height: 30rpx;
		margin-bottom: 40rpx;
	}

	.info {
		background: #fff;
		padding-top: 20rpx;
		border-radius: 20rpx;
	}
}

.hbg {

	padding: 0 3%;
	box-sizing: border-box;
	background-size: cover;
	padding-bottom: 40rpx;
	box-shadow: 0px 0px 10px #ccc;

	.head {
		padding-top: 60rpx;

		.pic {
			float: left;
		}

		.nickname {
			float: left;
			margin-top: 40rpx;
			margin-left: 10rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #444;
			border: 0;
			background: unset;
		}

		.nickname::after {
			border: 0;
		}

		.role {
			float: right;
			margin-top: 40rpx;
			background-color: #111734;
			padding: 10rpx 20rpx;
			border-radius: 40rpx;
		}
	}

	.mid {
		display: flex;
		justify-content: space-between;
		margin-top: 80rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		navigator {
			font-size: 30rpx;
			color: #666;

			text {
				font-weight: bold;
				display: block;
				font-size: 38rpx;
				color: #000;
				text-align: center;
			}
		}
	}
}
</style>